<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/materialdesignicons.min.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 12px;
        }

        .div1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 50px;
            /* background-color: green; */
            margin-bottom: 10px;
        }

        .div1 .mdi {
            font-size: 25px;
        }

        .div1 .a {
            /* flex: 1; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: 15px;
        }

        .div2 img {
            width: 100%;
            height: 150px;
        }

        .div3 {
            /* position: fixed; */
            width: 100%;
            height: 70px;
            /* background-color: green; */
            display: flex;
            justify-content: space-between;
        }

        .div3 .a {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 7px;
        }

        .div3 .a .mdi {
            font-size: 30px;
        }

        .div4 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .div4 .a {
            font-size: 10px;
            color: #999;
        }

        .div4 .b {
            font-size: 13px;
            font-weight: bold;
        }

        .div4 .c {
            width: 50px;
            height: 20px;
            /* background-color: greenyellow; */
            border: 1px solid;
            border-radius: 10px;
            font-size: 3px;
            align-items: center;
            display: flex;
            padding: 0 5px;
        }

        .div5 {
            width: 100%;
            overflow: auto;
        }

        .div5-1 {
            width: 200%;
            height: 150px;
            /* background-image: url(); */
            display: flex;
            justify-content: space-between;

        }
        .div5-2{
            width: 100px;
            height: 150px;
        }
        .div5 img {
            width: 100px;
            height: 100px;
            border-radius: 10px;
        }

        .div5 .a {
            font-size: 10px;
            /* align-items: center; */
        }

        .div6 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .div6 .a {
            font-size: 10px;
            color: #999;
        }

        .div6 .b {
            font-size: 13px;
            font-weight: bold;
        }

        .div6 .c {
            width: 70px;
            height: 20px;
            /* background-color: greenyellow; */
            border: 1px solid;
            border-radius: 10px;
            font-size: 3px;
            align-items: center;
            display: flex;
        }

        .div6 span {
            font-size: 15px;
        }

        .div7 {
            width: 100%;
            overflow: auto;
            /* flex-wrap: wrap; */
            margin-bottom: 10px;
        }

        .nav {
            width: 400%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav .b {
            width: 85%;
            height: 180px;
            /* background-color: yellow; */
            margin-right: 2%;
        }

        .nav .item {
            /* width: 80%; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 3%;
            margin-bottom: 10px;
        }

        .div7 .a {
            flex: 1;
            display: flex;
            /* justify-content: space-between; */
            /* align-items: center; */
        }

        .div7 img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 5px;
        }

        .a1 {
            color: #999;
            font-size: 9px;
            margin-top: 3px;
        }
        .div7 .a2{
            font-size: 14px;
            margin-right: 10px;
        }
        .nav .mdi {
            font-size: 25px;
        }

        .div8 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .div8 .a {
            font-size: 10px;
            color: #999;
        }

        .div8 .b {
            font-size: 13px;
            font-weight: bold;
        }

        .div8 .c {
            width: 50px;
            height: 20px;
            /* background-color: greenyellow; */
            border: 1px solid;
            border-radius: 10px;
            font-size: 3px;
            align-items: center;
            display: flex;
            padding: 0 5px;
        }

        .div9 {
            width: 100%;
            overflow: auto;
        }

        .div9 .a {
            width: 300%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .div9 .b {
            width: 85%;
            height: 210px;
            background-color: rgb(49, 48, 48);
            border-radius: 5px;
            margin-right: 10px;
        }

        .div9 .c {
            width: 260px;
            height: 25px;
            margin-top: 5px;
            color: white;
            padding-top: 10px;
            padding-left: 10px;
        }

        .div9 .d {
            width: 90%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 10px;
            margin-top: 13px;
        }

        .div9 .d img {
            width: 40px;
            height: 40px;
            border-radius: 5px;
        }

        .div9 .e {
            flex: 1;
            display: flex;
            /* justify-content: space-between; */
        }

        .div9 .e1 {
            color: white;
            font-size: 13px;
            margin: 0 10px;
        }

        .div9 .e2 {
            color: #666;
            font-size: 10px;
        }

        .div9 .f {
            color: white;
            font-size: 11px;
            /* margin-right: 10px; */
        }
    </style>
</head>

<body>
    <div class="div1">
        <span class="mdi mdi-card-text-outline"></span>
        <div class="a">我的</div>
        <div class="a">发现</div>
        <div class="a">云村</div>
        <div class="a">视频</div>
        <span class="mdi mdi-magnify"></span>
    </div>
    <div class="div2">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=167149684,999093845&fm=26&gp=0.jpg ">
    </div>
    <div class="div3">
        <div class="a"><span class="mdi mdi-google-downasaur"></span>每日推荐</div>
        <div class="a"><span class="mdi mdi-google-downasaur"></span>歌单</div>
        <div class="a"><span class="mdi mdi-google-downasaur"></span>排行榜</div>
        <div class="a"><span class="mdi mdi-google-downasaur"></span>电台</div>
        <div class="a"><span class="mdi mdi-google-downasaur"></span>直播</div>
    </div>
    </div>
    <div class="div4">
        <div>
            <div class="a">推荐歌单</div>
            <div class="b">为你精挑细选</div>
        </div>
        <div class="c">查看更多</div>
    </div>
    <div class="div5">
        <div class="div5-1">
            <div class="div5-2"><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584528706715&di=5a13986c2367cc49b4c5ab8dbb10a0df&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F23%2F20170823160156_Vzftd.thumb.700_0.jpeg"
                    alt="">
                <div class="a">路上要听的轻快悦耳旋律</div>
            </div>
            <div  class="div5-2"><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619066699&di=8dca4641c5110e43e0ec2a4e4b093146&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F37d12f2eb9389b505ee3a46a8735e5dde7116eed.jpg"
                    alt="">
                <div class="a">最懂你的华语推荐</div>
            </div>
            <div  class="div5-2"><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619109529&di=d5f32dfd846736a2094cb01360302bb5&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F09%2F20170809211015_yckmz.thumb.700_0.jpeg"
                    alt="">
                <div class="a">和云村漫迷一起靠近纯真的世界</div>
            </div>
            <div class="div5-2"><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619109526&di=1a209aedebfa3e089a231542162f6fb5&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-48c69737e0f986248dad89dbf6dc4dce_hd.jpg"
                    alt="">
                <div class="a">每日更新的古风专属歌单</div>
            </div>
            <div class="div5-2"><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619182624&di=b512db109fd933cb9cf21b39831250fb&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F545b40b3e1fc0.jpg"
                    alt="">
                <div class="a">打开你学生时代的MP3</div>
            </div>
            <div class="div5-2"><img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619197306&di=81a771386ecdf4809e0dc9e18dc1cecd&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2018-07-02%2F5b3990f13652a.jpg"
                    alt="">
                <div class="a">治愈系温柔御姐   </div>
            </div>
        </div>
    </div>
    <div class="div6">
        <div>
            <div class="a">风格推荐</div>
            <div class="b">诗和远方 我和民谣</div>
        </div>
        <div class="c"><span class="mdi mdi-play"></span>
            播放全部</div>
    </div>
    <div class="div7">
        <div class="nav">
            <div class="b">
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584530028736&di=e742f58b85fcbf9fe6f11c8eefbfee67&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201405%2F16%2F20140516011521_j2FHv.jpeg">
                    <div class="a">
                        <div class="a2">椿</div>
                        <div class="a1">-沈以诚</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619240080&di=a677512a57c99cfcf6fa0de9e8856f42&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190908%2F23%2F1567956114-iObZvmkVDC.jpg">
                    <div class="a">
                        <div class="a2">漠河餐厅</div>
                        <div class="a1">-柳爽</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619240080&di=17fcf4ed585886dcf704079cd261256f&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-27%2F5a6be4eb5a567.jpg">
                    <div class="a">
                        <div class="a2">爱失救</div>
                        <div class="a1">-黄伊汶</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
            </div>
            <div class="b">
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619240079&di=8902c316d25a524118ce892f427ecb9c&imgtype=0&src=http%3A%2F%2Fwww.962.net%2Fup%2F2010-11%2F2010111114141343109942.jpg">
                    <div class="a">
                        <div class="a2">你不在了</div>
                        <div class="a1">-江若琳</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619282364&di=5d25e38c790d154494e4e06817360cfa&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-03-10%2F5e67229390479.png">
                    <div class="a">
                        <div class="a2">十恶不赦</div>
                        <div class="a1">-刘浩龙</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619298616&di=0654ebce1327f4f8b3d1f11c25c87203&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F31%2F20180831101837_mfryp.thumb.700_0.png">
                    <div class="a">
                        <div class="a2">触不到的恋人</div>
                        <div class="a1">-陈菀淇</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
            </div>
            <div class="b">
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619314733&di=00e2b1f412094a5e233bf6da8ff4a75e&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F09c1e9b26740e743836fe9cfd5cb13056a61d57e14b0b-cvMjVL_fw658">
                    <div class="a">
                        <div class="a2">第二次初恋</div>
                        <div class="a1">-周吉佩</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619330535&di=0487de3af4ca87ad4a2c568698c618b5&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F09%2F1603451947663.jpg">
                    <div class="a">
                        <div class="a2">浪漫实际</div>
                        <div class="a1">-胡杏儿</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619343733&di=0284bab3a4e32c76b3b186565823ee59&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201503%2F13%2F20150313220420_ZRU2s.thumb.700_0.jpeg">
                    <div class="a">
                        <div class="a2">夜潜者</div>
                        <div class="a1">-官恩娜</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
            </div>
            <div class="b">
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619380014&di=6ba6030d2107bc894e41687278b55f3b&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7034b96223659d7c9808a3afe3e8a5b8e65a4bb8.jpg">
                    <div class="a">
                        <div class="a2">初哥</div>
                        <div class="a1">-E-kids</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619399915&di=9f171e0c8e5f8c09db8b48d577c5399d&imgtype=0&src=http%3A%2F%2Ft-1.tuzhan.com%2Fcf24fb9c8c28%2Fc-2%2Fl%2F2014%2F01%2F29%2F02%2F4d25db38f0384ee9af061085c1e554b9.jpg">
                    <div class="a">
                        <div class="a2">傻女</div>
                        <div class="a1">-卫诗</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
                <div class="item">
                    <img
                        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1116715811,519481708&fm=26&gp=0.jpg">
                    <div class="a">
                        <div class="a2">小角色</div>
                        <div class="a1">-小肥</div>
                    </div>
                    <span class="mdi mdi-play-circle-outline"></span>
                </div>
            </div>

        </div>
    </div>
    <div class="div8">
        <div>
            <div class="a">场景推荐</div>
            <div class="b">热歌风向标</div>
        </div>
        <div class="c">查看更多</div>
    </div>
    <div class="div9">
        <div class="a">
            <div class="b">
                <div class="c"><span class="mdi mdi-fire"></span>
                    云音乐说唱榜<span class="mdi mdi-arrow-right"></span>
                </div>
                <div class="d">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584589985034&di=a06e6fb843c1e382453c6b74f367fbc2&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc8177f3e6709c93dcf78c57c9e3df8dcd00054b7.jpg">
                    <div class="e">
                        <div class="e1">1 没得</div>
                        <div class="e2">- 刘聪</div>
                    </div>
                    <div class="f">新</div>
                </div>
                <div class="d">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619451587&di=0f614cdcac53be38c13e0091023d699d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-08-30%2F5b878eec0d4cf.jpg">
                    <div class="e">
                        <div class="e1">2 神树</div>
                        <div class="e2">- 华晨宇</div>
                    </div>
                    <div class="f">新</div>
                </div>
                <div class="d">
                    <img
                        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4080408097,2118448031&fm=26&gp=0.jpg">
                    <div class="e">
                        <div class="e1">3 暖暖</div>
                        <div class="e2">- 梁静茹</div>
                    </div>
                    <div class="f">新</div>
                </div>
            </div>
            <div class="b">
                <div class="c">云音乐说唱榜></div>
                <div class="d">
                    <img
                        src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2691823502,1404212626&fm=26&gp=0.jpg">
                    <div class="e">
                        <div class="e1">1 宁夏</div>
                        <div class="e2">- 梁静茹</div>
                    </div>
                    <div class="f">新</div>
                </div>
                <div class="d">
                    <img
                        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=284731311,1071124968&fm=26&gp=0.jpg">
                    <div class="e">
                        <div class="e1">2 起风了</div>
                        <div class="e2">- 买辣椒也用券</div>
                    </div>
                    <div class="f">新</div>
                </div>
                <div class="d">
                    <img
                        src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=354080127,2872016852&fm=11&gp=0.jpg">
                    <div class="e">
                        <div class="e1">3 听见</div>
                        <div class="e2">- 不才</div>
                    </div>
                    <div class="f">新</div>
                </div>
            </div>
            <div class="b">
                <div class="c">云音乐说唱榜></div>
                <div class="d">
                    <img
                        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1461253141,2749791757&fm=26&gp=0.jpg">
                    <div class="e">
                        <div class="e1">1 不傻</div>
                        <div class="e2">- 李林森</div>
                    </div>
                    <div class="f">新</div>
                </div>
                <div class="d">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619560682&di=69dd905764e5d323886dd2fbc7df1faa&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D37806758%2C2830612844%26fm%3D214%26gp%3D0.jpg">
                    <div class="e">
                        <div class="e1">2 Light The Light</div>
                        <div class="e2">- RADWIMPS</div>
                    </div>
                    <div class="f">新</div>
                </div>
                <div class="d">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584619576109&di=d19768f587e50dbd3d6ce2419ac0dfb8&imgtype=0&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2014%2F12%2F16%2F584_2014121614446419.jpg">
                    <div class="e">
                        <div class="e1">3 冬眠</div>
                        <div class="e2">- 司南</div>
                    </div>
                    <div class="f">新</div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>